<template>
  <section>
    <div class="recommend-title">周末去哪儿</div>
    <ul>
      <li class="recommend-item" v-for="item of list" :key="item.id">
        <div class="recommend-img">
          <img :src="item.imgUrl" alt="#">
        </div>
        <div class="recommend-info">
          <p class="recommend-info-title">{{item.title}}</p>
          <p class="recommend-info-desc">{{item.desc}}</p>
        </div>
      </li>
    </ul>
  </section>
</template>
<script>
export default {
  name: 'HomeWeekend',
  props: {
    list: Array
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/minins.styl'
  .recommend-title
    background: #eee
    font-size: 1.4rem
    line-height: 2.5rem
    text-indent: 1.0rem
  .recommend-item
    padding-bottom: .83rem
    // 设置图片宽高比,防止抖动
  .recommend-img
    height: 0
    overflow: hidden
    padding-bottom: 37.33%
  .recommend-img img
    width: 100%
  .recommend-info
    min-width: 0
    padding-left: 1.0rem
  .recommend-info-title
    ellipsis()
    font-size: 1.6rem
    margin-top: 1.0rem
    color: #212121
  .recommend-info-desc
    ellipsis()
    font-size: 1.2rem
    margin-top: 1.0rem
    margin-bottom: 1.3rem
    color: #616161
</style>
